import { memo, useCallback } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { useNavigate } from 'react-router-dom';
import shu from '@/assets/shu.jpg';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import {
  A11y,
  Autoplay,
  EffectCards,
  Navigation,
  Pagination,
  Scrollbar,
} from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import {
  AutoplayOptions,
  NavigationOptions,
  PaginationOptions,
  ScrollbarOptions,
} from 'swiper/types';
import './index.scss';
import {formatUrl} from "@/utils/format";

const navigation: NavigationOptions = {
  prevEl: '.sliders-prev',
  nextEl: '.sliders-next',
};
const scrollbar: ScrollbarOptions = { draggable: true };
const pagination: PaginationOptions = { clickable: true };
const autoplay: AutoplayOptions = {
  disableOnInteraction: false,
};
const HomeSlider: FC<PropsWithChildren<{ data: API.SlideStruct[] }>> = ({
  data,
}) => {
  const navigate = useNavigate();
  const onClickHandler = useCallback((path: string) => {
    navigate(path);
  }, []);
  return (
    <>
      <div className={'flex h-[356px] items-center'}>
        <div
          className={
            'sliders-prev bg-blue-50 text-blue-300 hover:text-blue-50 transition-all hover:bg-blue-200 w-8 h-8 text-xl flex-justify-items-center rounded-full hover:ring-1 hover:ring-offset-1 '
          }
        >
          <LeftOutlined />
        </div>
      </div>
      <section key={'slides'} className={'max-w-[220px] '}>
        <Swiper
          width={220}
          height={356}
          modules={[
            Navigation,
            Pagination,
            Scrollbar,
            A11y,
            Autoplay,
            EffectCards,
          ]}
          navigation={navigation}
          scrollbar={scrollbar}
          pagination={pagination}
          effect={'cards'}
          autoplay={autoplay}
        >
          {data.length > 0
            ? data.map((value) => {
                return (
                  <SwiperSlide
                    onClick={() => {
                      onClickHandler(value.url);
                    }}
                    key={value.id}
                  >
                    <img
                      alt={'slider'}
                      src={formatUrl(value.img)}
                      className={'select-none cursor-pointer h-[356px]'}
                    />
                  </SwiperSlide>
                );
              })
            : null}
        </Swiper>
      </section>
      <div className={'flex h-[356px] items-center'}>
        <div
          className={
            'sliders-next bg-blue-50 text-blue-300 hover:text-blue-50 transition-all hover:bg-blue-200 w-8 h-8 text-xl flex-justify-items-center rounded-full hover:ring-1 hover:ring-offset-1 '
          }
        >
          <RightOutlined />
        </div>
      </div>
    </>
  );
};

export default memo(HomeSlider);
